<template>
  <el-table :data="fileList" stripe v-loading="loading" height="100%" size="default">
    <el-table-column show-overflow-tooltip label="文件名" prop="name" min-width="260"></el-table-column>
    <el-table-column label="歌曲名" show-overflow-tooltip prop="meta.common.title" min-width="120"></el-table-column>
    <el-table-column label="歌手" sortable show-overflow-tooltip prop="meta.common.artist"
                     min-width="120"></el-table-column>
    <el-table-column label="专辑" sortable show-overflow-tooltip prop="meta.common.album"
                     min-width="120"></el-table-column>
    <el-table-column label="发行时间" sortable show-overflow-tooltip prop="meta.common.date"
                     min-width="120"></el-table-column>
    <el-table-column label="时长" prop="meta.format.duration" min-width="100">
      <template v-slot="{row}">
        {{ row.meta ? formatTime(row.meta.format.duration) : '' }}
      </template>
    </el-table-column>
    <el-table-column label="文件大小" prop="size" min-width="100">
      <template v-slot="{row}">
        {{ formatSize(row.size) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="120">
      <template v-slot="{row}">
        <el-button size="small" :icon="Download" type="primary" circle :loading="row.downloading"
                   @click="downloadLyric(row)"></el-button>
        <el-button size="small" :icon="Delete" type="danger" circle :loading="row.downloading"
                   @click="downloadLyric(row)"></el-button>
        <el-button size="small" :icon="VideoPlay" type="success" circle
                   @click="play(row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <player></player>
</template>

<script setup lang="ts">
import {fileList, loading, File} from "../uses/useFiles";
import {play} from "../uses/usePlayer";
import {Download, Delete, VideoPlay} from '@element-plus/icons-vue';
import {ref, toRaw} from "vue";
import Player from "./player.vue";
import {formatSize, formatTime} from "../common/utils";

const downloadLyric = async (file: File) => {
  file.downloading = true;
  try {
    //@ts-ignore
    const data = await window.remote.lyric.queryList(toRaw(file));
    //@ts-ignore
    file.lyric = await window.remote.lyric.getLyric(data.exact.songmid);
  } catch (e) {
    console.log(e);
  }
  file.downloading = false;
};

</script>

<style scoped>
* {
  user-select: none;
}
</style>
